<template>
  <div>
    <el-input v-model="CUSTOMER_NAME" readonly placeholder="客户名称">
      <i slot="suffix" class="el-input__icon el-icon-circle-plus" @click="openDia"/>
      <i slot="suffix" class="el-input__icon el-icon-error" @click="changeDE"/>
    </el-input>
    <el-dialog
      ref="dialog"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="往来客户选择"
      width="70%"
      @opened="searchHandle"
      @close="clearDialogDate"
    >
      <!-- 查询条件 -->
      <div class="searchform">
        <el-form ref="searchForm" :inline="true" :model="search" size="mini">
          <el-form-item prop="CUSTOMER_CODE" label="客户代码">
            <el-input v-model="search.CUSTOMER_CODE" placeholder="客户代码" class="search-input" clearable/>
          </el-form-item>
          <el-form-item prop="CUSTOMER_NAME" label="客户名称">
            <el-input v-model="search.CUSTOMER_NAME" placeholder="客户名称" class="search-input" clearable/>
          </el-form-item>
          <el-form-item prop="CUSTOMER_NAME" label="客户类型">
            <r-select
              v-model="search.CUSTOMER_TYPE_CODE"
              class="form-input"
              selectid="BASEDATA_ID"
              selectname="BASEDATA_NAME"
              url="/basedata/customerResoType/resoType/dicts/10421034"
              model="DMSCLOUD_CUSTOMER"
              clearable
            />
          </el-form-item>

          <div style="text-align:center">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">往来客户信息</div>
        </div>
        <!-- 用户列表 -->
        <BaseTable
          ref="table"
          highlight-current-row
          @chaneg-size="changeSizeHandle"
          @chaneg-page="changePageHandle"
          @current-change="select"
        >
          <el-table-column label="序号" type="index" min-width="50"/>
          <el-table-column label="" min-width="20">
            <template slot-scope="scope">
              <el-radio v-model="radioValue" :label="scope.$index" @change.native="getTemplateRow(scope.$index,scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="CUSTOMER_CODE" label="客户代码" min-width="100"/>
          <el-table-column :show-overflow-tooltip="true" prop="CUSTOMER_NAME" label="客户名称" min-width="100"/>
          <el-table-column :show-overflow-tooltip="true" prop="CUSTOMER_SHORT_NAME" label="客户简称" min-width="100"/>
          <el-table-column :show-overflow-tooltip="true" prop="BASEDATA_NAME" label="客户类型" min-width="100"/>
          <el-table-column :show-overflow-tooltip="true" prop="DATA_SOURCES" label="数据来源" min-width="100">
            <template slot-scope="scope">
              <filtercode v-model="scope.row.DATA_SOURCES" type="1045"/>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="CONTACTOR_MOBILE" label="联系人手机" min-width="100"/>
        </BaseTable>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">

        <el-button type="text"><i class="el-icon-search magnifier"/></el-button>
        <el-button type="primary" @click="confirmHandle">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getselectPartCustomer } from '@/api/part/dms/basedata/customerResoType'
import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
export default {
  name: 'SelectPartCustomer',
  components: {
    BaseTable,
    filtercode,
    rSelect
  },
  mixins: [formMixins],
  props: {
    CUSTOMER_NAME: String
  },
  data() {
    return {
      dialogFormVisible: false,
      multipleSelection: [],
      radioSelectDate: {},
      radioValue: {},
      search: {
        limit: 10,
        pageNum: 1,
        CUSTOMER_CODE: '',
        CUSTOMER_NAME: '',
        CUSTOMER_TYPE_CODE: ''
      }
      // CUSTOMER_NAME: ""
    }
  },
  computed: {},
  // el-dialog懒加载到导致this.$refs["table"]无法获取dom
  updated() {
    if (this.dialogFormVisible) {
      this.searchHandle()
    }
  },
  mounted() {},
  methods: {
    searchHandle() {
      const table = this.$refs['table']
      getselectPartCustomer(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    openDia() {
      this.dialogFormVisible = true
    },
    changeDE() {
      this.$emit('getPartCustomerInfo', {})
    },
    // 客户选择
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    getTemplateRow(id, rowDate) {
      this.radioSelectDate = rowDate
    },
    confirmHandle() {
      // if (this.CUSTOMER_NAME != "") {
      //   this.dialogFormVisible = false;
      // }
      if (this.radioSelectDate == null || this.radioSelectDate.CUSTOMER_CODE == null) {
        this.$message({
          type: 'info',
          message: '请选择数据!'
        })
      } else {
        this.$emit('getPartCustomerInfo', this.radioSelectDate)
        this.dialogFormVisible = false
      }
    },
    cancel() {
      this.dialogFormVisible = false
    },
    clearDialogDate() {
      this.radioSelectDate = {}
      this.radioValue = {}
    }
  }
}
</script>

<style scoped>
.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
</style>
